<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>


			*,*:before,*:after {
		    	box-sizing: border-box;
		    	margin: 0;
		    	padding: 0
		    }
		    
		    html,body {
		    	height: 100%
		    }
		    
			a {
				text-decoration: none;
			}
			
			img {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate3d(-50%,0,0);
				transform: translate3d(-50%,0,0);
				box-shadow: 0 10px 35px rgba(0,0,0,.2);
			}
			
		    .nav {
		    	overflow: hidden;
		    	position: absolute;
		    	right: 1.875rem;
		    	top: 1.875rem;
		    	width: auto;
		    	height: 5.625rem;
		    	background: #fff;
		    	border-radius: 5px;
		    	box-shadow: 0 10px 35px rgba(0,0,0,.2)
		    }
		    
		    .nav__cb {
		    	z-index: -1000;
		    	position: absolute;
		    	left: 0;
		    	top: 0;
		    	opacity: 0;
		    	pointer-events: none
		    }
		    
		    .nav__content {
		    	position: relative;
		    	width: 90px;
		    	height: 100%;
		    	-webkit-transition: width 1s cubic-bezier(.49,-.3,.68,1.23);
		    	transition: width 1s cubic-bezier(.49,-.3,.68,1.23)
		    }
		    
		    .nav__cb:checked~.nav__content {
		    	-webkit-transition: width 1s cubic-bezier(.48,.43,.29,1.3);
		    	transition: width 1s cubic-bezier(.48,.43,.29,1.3);
		    	width: 410px
		    }
		    
		    .nav__items {
		    	position: relative;
		    	width: 410px;
		    	height: 100%;
		    	padding-left: 20px;
		    	padding-right: 110px;
		    	list-style-type: none;
		    	font-size: 0
		    }
		    
		    .nav__item {
		    	display: inline-block;
		    	vertical-align: top;
		    	width: 70px;
		    	text-align: center;
		    	color: #6c7784;
		    	font-size: 14px;
		    	line-height: 90px;
		    	font-family: Helvetica,Arial,sans-serif;
		    	font-weight: 700;
		    	-webkit-perspective: 1000px;
		    	perspective: 1000px;
		    	-webkit-transition: color .3s;
		    	transition: color .3s;
		    	cursor: pointer
		    }
		    
		    .nav__item:hover {
		    	color: #00bdea
		    }
		    
		    .nav__item-text {
		    	display: block;
		    	height: 100%;
		    	-webkit-transform: rotateY(-70deg);
		    	transform: rotateY(-70deg);
		    	opacity: 0;
		    	-webkit-transition: opacity .7s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: opacity .7s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .7s;
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .7s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5)
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item-text {
		    	-webkit-transform: rotateY(0);
		    	transform: rotateY(0);
		    	opacity: 1;
		    	-webkit-transition: opacity .2s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: opacity .2s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .2s;
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .2s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5)
		    }
		    
		    .nav__item:nth-child(1) .nav__item-text {
		    	-webkit-transition-delay: .3s;
		    	transition-delay: .3s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(1) .nav__item-text {
		    	-webkit-transition-delay: 0s;
		    	transition-delay: 0s
		    }
		    
		    .nav__item:nth-child(2) .nav__item-text {
		    	-webkit-transition-delay: .2s;
		    	transition-delay: .2s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(2) .nav__item-text {
		    	-webkit-transition-delay: .1s;
		    	transition-delay: .1s
		    }
		    
		    .nav__item:nth-child(3) .nav__item-text {
		    	-webkit-transition-delay: .1s;
		    	transition-delay: .1s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(3) .nav__item-text {
		    	-webkit-transition-delay: .2s;
		    	transition-delay: .2s
		    }
		    
		    .nav__item:nth-child(4) .nav__item-text {
		    	-webkit-transition-delay: 0s;
		    	transition-delay: 0s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(4) .nav__item-text {
		    	-webkit-transition-delay: .3s;
		    	transition-delay: .3s
		    }
		    
		    .nav__btn {
		    	position: absolute;
		    	right: 0;
		    	top: 0;
		    	width: 90px;
		    	height: 90px;
		    	padding: 36px 31px;
		    	cursor: pointer
		    }
		    
		    .nav__btn:before,.nav__btn:after {
		    	content: "";
		    	display: block;
		    	width: 28px;
		    	height: 4px;
		    	border-radius: 2px;
		    	background: #096dd3;
		    	-webkit-transform-origin: 50% 50%;
		    	transform-origin: 50% 50%;
		    	-webkit-transition: background-color .3s,-webkit-transform 1s cubic-bezier(.48,.43,.29,1.3);
		    	transition: background-color .3s,-webkit-transform 1s cubic-bezier(.48,.43,.29,1.3);
		    	transition: transform 1s cubic-bezier(.48,.43,.29,1.3),background-color .3s;
		    	transition: transform 1s cubic-bezier(.48,.43,.29,1.3),background-color .3s,-webkit-transform 1s cubic-bezier(.48,.43,.29,1.3)
		    }
		    
		    .nav__btn:before {
		    	margin-bottom: 10px
		    }
		    
		    .nav__btn:hover:before,.nav__btn:hover:after {
		    	background: #00bdea
		    }
		    
		    .nav__cb:checked~.nav__btn:before {
		    	-webkit-transform: translateY(7px) rotate(-225deg);
		    	transform: translateY(7px) rotate(-225deg)
		    }
		    
		    .nav__cb:checked~.nav__btn:after {
		    	-webkit-transform: translateY(-7px) rotate(225deg);
		    	transform: translateY(-7px) rotate(225deg)
		    }
			
			body {
			  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
			  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
			  background-attachment: fixed;
			  overflow: hidden;
			}
			
			@keyframes rotate {
			  0% {
			    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
			  }
			  100% {
			    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
			  }
			}
			.stars {
			  transform: perspective(500px);
			  transform-style: preserve-3d;
			  position: absolute;
			  bottom: 0;
			  perspective-origin: 50% 100%;
			  left: 50%;
			  animation: rotate 90s infinite linear;
			}
			
			.star {
			  width: 2px;
			  height: 2px;
			  background: #F7F7B6;
			  position: absolute;
			  top: 0;
			  left: 0;
			  transform-origin: 0 0 -300px;
			  transform: translate3d(0, 0, -300px);
			  backface-visibility: hidden;
			}
			
		</style>
	</head>
	<body>
		<div class="stars" id="stars">
		</div>
		<nav class="nav">
			<input type="checkbox" class="nav__cb" id="menu-cb">
			<div class="nav__content">
				<ul class="nav__items">
					<li class="nav__item"> <a href="//albertyang.blog.csdn.net"><span class="nav__item-text"> CSDN </span> </a> </li>
					<li class="nav__item"> <span class="nav__item-text"> 知乎 </span> </li>
					<li class="nav__item"> <span class="nav__item-text"> 关于 </span> </li>
					<li class="nav__item"> <span class="nav__item-text"> 联系我 </span> </li>
				</ul>
			</div>
			<label class="nav__btn" for="menu-cb"></label>
		</nav>
		<img src="./img/weChat.jpg" />
	</body>
	<script>
		window.onload = function() {
			var stars = 800; /*星星的密集程度，数字越大越多*/
			var $stars = document.getElementById("stars");
			var r = 800; /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
			for (var i = 0; i < stars; i++) {
				var $star = document.createElement('div');
				$star.classList.add("star");
				var s = 0.2 + (Math.random() * 1);
				var curR = r + (Math.random() * 300);
				console.log($star);
				$star.style.cssText = "transform-origin: 0 0 " + curR + "px; transform: translate3d(0,0,-" + curR + "px) rotateY(" +
					(Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")";
				$stars.appendChild($star);
			}
		}
	</script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
        <script src="https://cdn.jsdelivr.net/gh/albertyang666/live2d-widget@latest/autoload.js"></script>
</html>
